<template>
  <!--    创建面试题   -->
  <page-wrap
    back
    title="创建面试题"
    hide-tab
    stay-still
    :hideSafeArea="true"
    :bg-color="uNavColor"
  >
    <InterViewNavbg />

    <view class="header"> {{ positionName }}</view>

    <view class="question-box">
      <view class="question-title">问题</view>
      <u-input
        type="textarea"
        class="question-input"
        v-model="formQuestion"
        maxlength="100"
        :height="200"
        :clearable="true"
        :placeholder="'请输入问题...'"
      >
      </u-input>

      <view class="font-num-limit">字数限制：100</view>
    </view>
    <view class="answer-box">
      <view class="answer-title">答案</view>
      <u-input
        type="textarea"
        class="answer-input"
        v-model="formAnswer"
        maxlength="500"
        :height="500"
        :clearable="true"
        :placeholder="'请输入答案...'"
      >
      </u-input>

      <view class="font-num-limit">字数限制：500</view>
    </view>

    <view class="btn-box">
      <view class="commit" @click="onClickNext">提交，下一题</view>
      <view class="complete" @click="onClickComplete">完成</view>
    </view>
  </page-wrap>
</template>
  
  <script>
import { repoInfo, createQuestion } from "@/api/modules/company";

import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    InterViewNavbg,
  },
  data() {
    return {
      formQuestion: "",
      formAnswer: "",
      companyId: undefined,
      ylPositionId: undefined,
      repoId: undefined,
      positionName: "关联职业：",
      form: {},
    };
  },

  onLoad(options) {
    if (options && options.repoId) {
      this.repoId = options.repoId;
      this.reqRepoInfo();
    }
  },

  onShow() {},
  mounted() {},

  methods: {
    // 点击提交，下一题
    onClickNext() {
      this.reqCreateQuestion(true);
    },

    // 点击完成
    onClickComplete() {
      this.reqCreateQuestion(false);
    },

    // 新增题目
    reqCreateQuestion(isNext) {
      const params = {
        repoId: this.repoId,
        companyId: this.companyId,
        ylPositionId: this.ylPositionId,
        questionTitle: this.formQuestion,
        questionAnswer: this.formAnswer,
      };
      createQuestion(params)
        .then((res) => {
          uni.showToast({
            title: (res.status_desc+'').replace(/<\/?.+?>/g, ""),
            icon: "none",
          });
          if (res.code == 200) {
            if (isNext) {
              // 继续下一题
              this.formQuestion = "";
              this.formAnswer = "";
            } else {
              // 完成
              uni.navigateBack({ delta: 1 });
            }
          }
        })
        .finally(() => {});
    },

    // 获取题库详情信息
    reqRepoInfo() {
      const params = {
        id: this.repoId,
      };
      repoInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionName = "关联职业：" + res.data.positionName;
            this.ylPositionId = res.data.ylPositionId;
            this.companyId = res.data.companyId;
          }
        })
        .finally(() => {});
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.btn-box {
  display: flex;
  flex-direction: row;
  margin-top: 138rpx;
  margin-bottom: 96rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;

  .commit {
    width: 424rpx;
    height: 88rpx;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 28rpx;
    text-align: center;
    background: #f75a3e;
    border-radius: 44rpx;
  }

  .complete {
    width: 238rpx;
    height: 88rpx;
    line-height: 88rpx;
    color: #f75a3e;
    font-size: 28rpx;
    text-align: center;
    background: #ffebe7;
    border-radius: 44rpx;
    margin-left: 24rpx;
    border: 2rpx solid #f75a3e;
  }
}

.header {
  display: flex;
  height: 80rpx;
  background-color: white;
  border-radius: 24rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  text-align: center;
  line-height: 80rpx;
  color: #999999;
  font-size: 28rpx;
  padding-left: 36rpx;
}

.question-box {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 24rpx;
  padding-top: 36rpx;
  padding-left: 36rpx;
  padding-right: 32rpx;
  padding-bottom: 28rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 14rpx;

  .question-title {
    font-size: 32rpx;
    color: #222222;
  }

  .question-input {
    margin-top: 12rpx;
  }

  .font-num-limit {
    color: #cbcbcb;
    font-size: 26rpx;
    text-align: right;
  }
}
.answer-box {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 24rpx;
  padding-top: 36rpx;
  padding-left: 36rpx;
  padding-right: 32rpx;
  padding-bottom: 28rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 14rpx;

  .answer-title {
    font-size: 32rpx;
    color: #222222;
  }

  .answer-input {
    margin-top: 12rpx;
  }

  .font-num-limit {
    color: #cbcbcb;
    font-size: 26rpx;
    text-align: right;
  }
}
</style>
  